<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/layui/css/layui.css"  media="all">
</head>
<body>
<!-- <button class="layui-btn layui-btn-danger"  id="member-list">返回上一级</button> -->
<h1 type="text" id="registerWay">微信注册</h1>
<form name="form" class="layui-form" style="margin-top: 20px;" method="post" action="">
 <div class="layui-form-item">
    <div class="layui-inline">	
      <label class="layui-form-label" style="color:#F00">微信方式</label>
      <div class="layui-input-inline">
        <input type="text" id="openid" name="openid" value="<%= request.getSession().getAttribute("openid")%>" placeholder="请输入" maxlength="50" autocomplete="off" class="layui-input" style="width: 300px;">
      </div>
    </div>
  </div>
  
 <div class="layui-form-item">
    <div class="layui-inline">	
      <label class="layui-form-label" style="color:#F00">微信昵称</label>
      <div class="layui-input-inline">
        <input type="text" id="nickname" name="nickname" value="<%= request.getSession().getAttribute("nickname")%>" placeholder="请输入" maxlength="50" autocomplete="off" class="layui-input" style="width: 300px;">
      </div>
    </div>
  </div>
   
 <div class="layui-form-item">
    <div class="layui-inline">	
      <label class="layui-form-label" style="color:#F00">注册方式</label>
      <div class="layui-input-inline">
        <input type="text" id="registerWay" name="registerWay" value="微信注册" placeholder="请输入" maxlength="50" autocomplete="off" class="layui-input" style="width: 300px;">
      </div>
    </div>
  </div>
   
 <div class="layui-form-item">
    <div class="layui-inline">	
      <label class="layui-form-label" style="color:#F00">手机号码</label>
      <div class="layui-input-inline">
        <input type="text" id="phone" name="phone" lay-verify="required" placeholder="请输入" maxlength="50" autocomplete="off" class="layui-input" style="width: 300px;">
      </div>
    </div>
  </div>
      <a id="verifyphone" style="display:none; ">The mobile phone number you entered is not correct, please re-enter it!</a>
   
   <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" style="color:#F00">手机验证码</label>
      <div class="layui-input-inline">
        <input type="text" id="coded" name="coded" placeholder="请输入验证码" maxlength="50" lay-verify="required"  autocomplete="off" class="layui-input" >
      </div>
    <button class="layui-btn" data-type="btnAdd" id="yanzhengma" style="width: 100px;">发送验证码</button>
    </div>
  </div>
  <a id="verifycode" style="display:none; ">The verification code you entered is not correct, please re-enter it!</a>
  
    <div class="layui-form-item">
    <div class="layui-inline">	
      <label class="layui-form-label" style="color:#F00">姓名</label>
      <div class="layui-input-inline">
        <input type="text" id="username" name="username" lay-verify="required" placeholder="请输入" maxlength="50" autocomplete="off" class="layui-input" style="width: 300px;">
      </div>
    </div>
  </div>
  
    <div class="layui-form-item">
    <div class="layui-inline">	
      <label class="layui-form-label" style="color:#F00">性别</label>
      <div class="layui-input-inline">
        <input type="text" id="gender" name="gender" placeholder="请输入" maxlength="50" autocomplete="off" class="layui-input" style="width: 300px;">
      </div>
    </div>
  </div>
  
    <div class="layui-form-item">
    <div class="layui-inline">	
      <label class="layui-form-label" style="color:#F00">选证件类型</label>
      <div class="layui-input-inline">
        <input type="text" id="idType" name="idType" lay-verify="required" placeholder="请输入" maxlength="50" autocomplete="off" class="layui-input" style="width: 300px;">
      </div>
    </div>
  </div>
  
    <div class="layui-form-item">
    <div class="layui-inline">	
      <label class="layui-form-label" style="color:#F00">证件号码</label>
      <div class="layui-input-inline">
        <input type="text" id="idNumber" name="idNumber" lay-verify="required" placeholder="请输入" maxlength="50" autocomplete="off" class="layui-input" style="width: 300px;">
      </div>
    </div>
  </div>
  
   
  
  <!-- <div class="layui-form-item">
    <label class="layui-form-label">会员状态激活</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div> -->
  
  
  <!-- 按钮组 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
	   	<button class="layui-btn" lay-submit="" lay-filter="btnSubmit" id="btnSunmitMember">立即提交</button>
	    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
  </div>
</form>
<script src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script>
 <script src="<%=request.getContextPath()%>/layui/layui.js" charset="utf-8"></script>
<script>
var times = 60;

layui.use(['form', 'layedit', 'laydate','jquery'], function(){
	  var form = layui.form;
	  var $ = layui.jquery;
	  var layer = layui.layer;
	  var layedit = layui.layedit;
	  var laydate = layui.laydate;
  
	  
	  function roof(){
          if(times == 0){
              $('#yanzhengma').text('发送验证码('+times+'s)');
              $('#yanzhengma').prop('disabled',false);
              $('#yanzhengma').text('发送验证码');
              $("#phone").prop('disabled',false);
              times =60;
              return
          }
          $('#yanzhengma').text('发送验证码('+times+'s)');
          times--;

          setTimeout(roof,1000);
      }
	  
	  $('#yanzhengma').on('click',function(){

			var phone = $("#phoneNumber").val()
			var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      	if(!phone){
				$("#verifyphone").attr("style","margin-left: 30px;color: red;display: block;")
				document.getElementById("verifyphone").innerHTML="输入的手机号码不能为空，请输入！";
      	}else if(!myreg.test(phone)){
				$("#verifyphone").attr("style","margin-left: 30px;color: red;display: block;")
				document.getElementById("verifyphone").innerHTML="输入的手机号码格式不正确，请重新输入！";
      	}else{
				$("#verifyphone").attr("style","display: none;")
	            $(this).prop('disabled',true);
	            $("#phone").prop('disabled',true);
	            roof();
	            
	            sendToPhone(phone);
	            
      	}
          
      });
	  
	  function sendToPhone(phone){
			$.getJSON("<%=request.getContextPath()%>/verify/sendSmsByAliyun.do",{"phone":phone},function(result){
				  console.log(result);
				  if(result.state==1){
					  layer.msg(result.message)
				  }else{
					  layer.msg(result.message)
				  }
			  });
  	}
	  
	  form.on('submit(btnSubmit)',function(data){
		  var mobile = $('#phone').val();
          var yanzheng = $('#yanzheng').val();
          var codeSty = $("#verifycode").attr("style")
		  
		  if(!mobile){
              $('#phone').focus();
              document.querySelector('#phone').placeholder = '请填写手机号码';
              return
          }
          if(!yanzheng){
              $('#yanzheng').focus();
              document.querySelector('#yanzheng').placeholder = '请填写验证码';
              return
          }
        	 if(codeSty != "display: none;"){
        		$('#yanzheng').focus();
             document.querySelector('#yanzheng').placeholder = '请填写正确验证码';
        		return
       	  }
        	 
		  var index = layer.load(1);//开启进度条
		  $.ajax({
				url : '<%=request.getContextPath()%>/verify/doVerPhoneMember.do',
				data :data.field,
				type:'POST',//默认以get提交，以get提交如果是中文后台会出现乱码
				dataType : 'json',
				success : function(obj) {
					layer.close(index);//关闭   
					if (obj.state == 1) {
						pubUtil.msg(obj.message,layer,1,function(){
							$("#close").click();
							window.location.href = "<%=request.getContextPath()%>/sysby/member/memberBI.do" 
						},500);
					} else {
						/* pubUtil.msg(obj.message,layer,2,function(){
							alert(obj.message)
							$("#close").click();
						},5*1000); */
						layer.msg(obj.message)
					}
				}
			});
	  });
	  
  
});
</script>

</body>
</html>